<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

  <title>jQuery Nice Select</title>

  <link href='https://fonts.googleapis.com/css?family=Work+Sans:300,400,600&Inconsolata:400,700' rel='stylesheet' type='text/css'>
  
  <link rel="stylesheet" href="css/style.css">
  
</head>

<body>

  <div class="container">
  
    <div class="header">      
      <h1>jQuery Nice Select</h1>
      
      <p>A lightweight jQuery plugin that replaces native select elements with customizable dropdowns.</p>
      
      <a href="https://github.com/hernansartorio/jquery-nice-select/archive/v1.1.0.zip" class="button">Download</a>
      <a href="https://github.com/hernansartorio/jquery-nice-select" class="button light">View on GitHub</a>
    </div>

    <h2>Usage</h2>
    <p><strong>1.</strong> Include jQuery and the plugin.</p>
    
    <pre><code class="language-html">&lt;script src=&quot;path/to/jquery.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;path/to/jquery.nice-select.js&quot;&gt;&lt;/script&gt;</code></pre>
    
    <p><strong>2.</strong> Include the plugin styles, either the compiled CSS...</p>
    
    <pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;path/to/nice-select.css&quot;&gt;</code></pre>

    <p>...or, ideally, import the SASS source (if you use SASS) in your main stylesheet for easier customization.</p>
    
    <pre><code class="language-scss">@import 'nice-select'; // Or 'nice-select-prefixed'. See 'Notes' section.</code></pre>
    
    <p><strong>3.</strong> Finally, initialize the plugin.</p>
    
    <pre><code class="language-js">$(document).ready(function() {
  $('select').niceSelect();
});</code></pre>
    
    <p>All done. That will turn this:</p>
    
    <div class="box">
      <select class="ignore">
        <option value="1">Some option</option>
        <option value="2">Another option</option>
        <option value="3" disabled>A disabled option</option>
        <option value="4">Potato</option>
      </select>
    </div>
    
    <p>...into this:</p>
    
    <div class="box">
      <select>
        <option value="1">Some option</option>
        <option value="2">Another option</option>
        <option value="3" disabled>A disabled option</option>
        <option value="4">Potato</option>
      </select>
    </div>
    
    <p>There are no settings (a native select doesn't have settings), although there are a couple of special features, documented below.</p>
    
    <h2>Display text</h2>
    <p>You can specify an alternate text for each option, which will be displayed on the dropdown when that option is selected.</p>
    
    <p>Add a <code class="language-html">data-display</code> attribute to the desired options. For example:</p>
    
    <pre><code class="language-html">&lt;select&gt;
  &lt;option data-display=&quot;Select&quot;&gt;Nothing&lt;/option&gt;
  &lt;option value=&quot;1&quot;&gt;Some option&lt;/option&gt;
  &lt;option value=&quot;2&quot;&gt;Another option&lt;/option&gt;
  &lt;option value=&quot;3&quot; disabled&gt;A disabled option&lt;/option&gt;
  &lt;option value=&quot;4&quot;&gt;Potato&lt;/option&gt;
&lt;/select&gt;</code></pre>
    
    <div class="box">
      <select>
        <option data-display="Select">Nothing</option>
        <option value="1">Some option</option>
        <option value="2">Another option</option>
        <option value="3" disabled>A disabled option</option>
        <option value="4">Potato</option>
      </select>
    </div>

    <h2>Custom classes</h2>
    
    <p>Every class you assign to a select element will be copied to the generated dropdown. That way you can customize different versions of it to your needs just by adding new CSS.</p>
    
    <p>These are some examples included in the plugin stylesheet:</p>
    
    <div class="box">
      <label>Wide</label>
      <select class="wide">
        <option data-display="Select">Nothing</option>
        <option value="1">Some option</option>
        <option value="2">Another option</option>
        <option value="3" disabled>A disabled option</option>
        <option value="4">Potato</option>
      </select>
    </div>
    
    <div class="box">
      <label class="right">Right</label>
      <select class="right">
        <option data-display="Select">Nothing</option>
        <option value="1">Some option</option>
        <option value="2">Another option</option>
        <option value="3" disabled>A disabled option</option>
        <option value="4">Potato</option>
      </select>
    </div>
    
    <div class="box">
      <label>Small</label>
      <select class="small">
        <option data-display="Select">Nothing</option>
        <option value="1">Some option</option>
        <option value="2">Another option</option>
        <option value="3" disabled>A disabled option</option>
        <option value="4">Potato</option>
      </select>
    </div>
    
    <h2>Methods</h2>
    
    <h3>update</h3>
    
    <p>Updates the custom dropdown to reflect any changes made to the original select element.</p>
    
    <pre><code class="language-js">$('select').niceSelect('update');</code></pre>
    
    <h3>destroy</h3>
    
    <p>Removes the custom dropdown and unbinds all its events.</p>
    
    <pre><code class="language-js">$('select').niceSelect('destroy');</code></pre>
    
    <h2>Notes</h2>  
    
    <ul>
      <li>
        <p>Autoprefixer is used to add vendor prefixes to CSS rules for older browser support. A <i>nice-select-prefixed.scss</i> file is also generated if you wish to include the SASS file in your project and you're not using Autoprefixer.</p>
      </li>
      <li>
        <p>In some cases there can be a brief flash in which the native selects are displayed—between the time the page is loaded and the scripts are run. This can be fixed by adding a CSS rule to hide them beforehand:</p>
            
        <pre><code class="language-scss">select {
  display: none;
}</code></pre>

        <p>Note that the above rule will hide all native select elements. If you're only applying the plugin to some select elements you should adapt the rule accordingly.</p>
      </li>
    </ul>

    <div class="footer">
      <h2>Use responsibly</h2>
      
      <p><a href="http://www.lukew.com/ff/entry.asp?1950">Dropdowns should be the UI of last resort.</a></p>
      
      <a href="https://github.com/hernansartorio/jquery-nice-select/archive/v1.1.0.zip" class="button">Download</a>
      <a href="https://github.com/hernansartorio/jquery-nice-select" class="button light">View on GitHub</a>
      
      <div class="credit">
        Made by <a href="http://hernansartorio.com?r=ns">Hernán Sartorio</a>
      </div>
    </div>
    
    
  </div>
  
  <script src="js/jquery.js"></script>
  <script src="js/jquery.nice-select.min.js"></script>
  <script src="js/fastclick.js"></script>
  <script src="js/prism.js"></script>
  
  <script>
    $(document).ready(function() {
      $('select:not(.ignore)').niceSelect();      
      FastClick.attach(document.body);
    });    
  </script>
  
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-64633646-1', 'auto');
    ga('send', 'pageview');
  </script>
  
</body>
</html>
